<template>
  <div id="login">
    <div class="login">
      <div class="box-card">
        <!-- <div class="left"></div> -->
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-position="left"
          label-width="0px"
          class="demo-ruleForm login-container"
        >
          <h3 class="title">双栈流量分析平台</h3>
          <!-- <lang-select class="set-language" /> -->
          <el-form-item prop="username" style="margin-bottom:34px">

            <div class="login-input-box">
              <span class="icon iuser"></span>
              <el-input name="username" placeholder="账号" v-model="loginForm.username"></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="password" class="passwordTS">

            <div class="login-input-box">
              <span class="icon ipassword"></span>
              <el-input placeholder="请输入密码" type="password" style="display: none;" show-password></el-input>
              <el-input placeholder="请输入密码" type="password" v-model="loginForm.password" show-password></el-input>
            </div>
          </el-form-item>
          <!--<el-checkbox v-model="checked" class="remember">记住用户和密码</el-checkbox>-->
          <el-form-item style="width:100%;">
            <el-button
              type="primary"
              style="width: 100%;background-color: #6296ea;border:1px solid #6296ea;margin-top:26px;"
              v-on:keyup.13.native="submit"
              @click.native.prevent="handleLogin"
              :loading="logining"
            >登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import { isvalidUsername } from '@/utils/validate'
  import LangSelect from '@/components/LangSelect'
  import SocialSign from './socialsignin'
  import Cookies from 'js-cookie'
  // 引入base64
  const Base64 = require('js-base64').Base64
  export default {
    components: { LangSelect, SocialSign },
    name: 'login',
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!isvalidUsername(value)) {
          callback(new Error('请输入正确的用户名'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码不能小于5位'))
        } else {
          callback()
        }
      }
      return {
        input: '',
        logining: false,
        checked: false,
        loginForm: {
          username: '',
          password: '',
          auth_type: ''
        },
        loginRules: {
          username: [{ required: true, trigger: 'blur', validator: validateUsername }],
          password: [{ required: true, trigger: 'blur', validator: validatePassword }]
        },
        passwordType: 'password',
        loading: false,
        showDialog: false
      }
    },
    methods: {
      submit() {
        this.handleLogin()
      },
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            let rasPw = this.$getRsaCode(this.loginForm.password)
            let rasUn = this.$getRsaCode(this.loginForm.username)
            let postlist = JSON.parse(JSON.stringify(this.loginForm))
            // postlist.username = rasUn
            // postlist.password = rasPw
            postlist.username = encodeURIComponent(rasUn) // 处理特俗字符
            postlist.password = encodeURIComponent(rasPw) // 处理特俗字符
            this.$store.dispatch('LoginByUsername', postlist).then(() => {
              this.loading = false
              this.setUserInfo()
              this.$router.push({ path: '/' })
            }).catch(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      setUserInfo() {
        if (this.checked) {
          Cookies.set('username', this.loginForm.username)
          // base64加密密码
          let passWord = Base64.encode(this.loginForm.password)
          Cookies.set('password', passWord)
          Cookies.set('remember', this.checked)
        } else {
          Cookies.set('remember', this.checked)
          Cookies.set('username', '')
          Cookies.set('password', '')
        }
      },
      afterQRScan() {
        // const hash = window.location.hash.slice(1)
        // const hashObj = getQueryObject(hash)
        // const originUrl = window.location.origin
        // history.replaceState({}, '', originUrl)
        // const codeMap = {
        //   wechat: 'code',
        //   tencent: 'code'
        // }
        // const codeName = hashObj[codeMap[this.auth_type]]
        // if (!codeName) {
        //   alert('第三方登录失败')
        // } else {
        //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
        //     this.$router.push({ path: '/' })
        //   })
        // }
      },
      getCookieInfo() {
        // 在页面加载时从cookie获取登录信息
        let username = Cookies.get('username')
        let password = Base64.decode(Cookies.get('password'))
        // 如果存在赋值给表单，并且将记住密码勾选
        if (Cookies.get('remember') === 'true') {
          this.loginForm.username = username
          this.loginForm.password = password
          this.checked = true
        }
      }
    },
    created() {
      var _this = this
      document.onkeydown = function(e) {
        let key = window.event.keyCode
        if (key == 13) {
          _this.submit()
        }
      }
      // this.getCookieInfo()
      // window.addEventListener('hashchange', this.afterQRScan)
    },
    destroyed() {
      // window.removeEventListener('hashchange', this.afterQRScan)
    }
  }
</script>

<style scoped>
  #login {
    display: table;
    background: url("../../assets/loginbeijing.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 100%;
  }
  .login {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
  }
  .box-card {
    margin: 0 auto;
    width: 777px;

  }
  .left {
    background:rgba(49,71,159,1);
    background-image: url('../../assets/loginzuo.png');
    float: left;
    width: 312px;
    height: 406px;
    text-align: right;
    /* padding: 70px; */
    box-sizing: border-box;
    border: 0;
    position: relative;
  }
  .img1{
    width: 209px;
    position: absolute;
    top:175px;
    left:40px;
  }
  .login-container {
    float:right;
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    /* -webkit-border-radius: 5px; */
    /* border-radius: 5px; */
    /* -moz-border-radius: 5px; */
    background-clip: padding-box;
    width: 465px;
    height: 406px;
    padding: 0 35px 0 35px;
    background: #fff;
    /* border: 1px solid #eaeaea; */
  }
  .title {
    margin: 47px auto 40px auto;
    text-align: center;
    color: #6296EA;
    font-size:24px;
  }
  .remember {
    margin: 10px 0px 35px 0px;
  }
  /*.remember >>> .el-checkbox__inner{*/
  /*background-color: #6296ea !important;*/
  /*border-color: #6296ea !important;*/
  /*}*/
  .remember >>> .el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #6296ea !important;
    border-color: #6296ea !important;
  }
  .login-input-box{
    /* margin-top: 12px; */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
  }

  /*.login-input-box input{*/
  /*width: 310px;*/
  /*height: 35px;*/
  /*!* margin-left: 18px; *!*/
  /*border: 1px solid #dcdcdc;*/
  /*!* border-radius: 4px; *!*/
  /*padding-left: 46px;*/
  /*font-size:16px;*/
  /*}*/

  /*.login-input-box input:hover{*/
  /*border: 1px solid #DFDFDF;*/
  /*}*/

  /*.login-input-box input:after{*/
  /*border: 1px solid #DFDFDF;*/
  /*}*/
  .login-input-box .icon{
    width: 28px;
    height: 28px;
    margin: 3px 4px 6px 10px;
    /* background-color: #ff7d0a; */
    display: inline-block;
    position: absolute;
    /* border-right: 1px solid #dcdcdc; */
  }

  .login-input-box .iuser{
    background: url("../../assets/userIcon.png") no-repeat;
    width: 30px;
    height: 35px;
    background-position: 9px 11px;
    background-size: 55%;
    margin: 0;
    margin-left: 6px;
    z-index: 999;
  }

  .login-input-box .ipassword{
    background: url("../../assets/keyIcon.png") no-repeat;
    width: 30px;
    height: 35px;
    background-position: 7px 12px;
    background-size: 60%;
    margin: 0;
    margin-left: 6px;
    z-index: 999;
  }
  .login-input-box >>> .el-input input{
    padding-left: 42px;
    border: 1px solid #dfdfdf !important;
  }
  .passwordTS >>> .el-form-item__error{
    padding-top: 11px;
  }
  .set-language {
    position: absolute;
    top: 31px;
    font-size: 18px;
    right: 36px;
    cursor: pointer;
  }
</style>
